<!-- 自定义带icon的tabPane -->
<template>
  <el-tab-pane v-bind="$attrs">
    <template #label>
      <span class="custom-tabs-label">
        <span>{{ props.label }}</span>
        <Icon style="margin-left: 10px" v-if="props.valid" color="green" icon="ep:circle-check" />
        <Icon v-else style="margin-left: 10px" color="red" icon="ep:warning" />
      </span>
    </template>
    <slot></slot>
  </el-tab-pane>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes'
  const props = defineProps({
    label: propTypes.string.def(''),
    valid: propTypes.bool.def(false)
  })
</script>

<style lang="scss" scoped>
  .custom-tabs-label {
    display: flex;
    align-items: center;
  }
</style>
